<template>
  <!-- 所有标签都必须写在一个div中 -->
  <div id="container">
    <el-row>
      <h1><i class="el-icon-eleme"></i>{{sysname}}</h1>
    </el-row>
    <el-row>
      <el-button type="primary" icon="el-icon-search" @click="toadd()">添加</el-button>
    </el-row>
    <el-row>

      <el-table :data="list" style="width: 100%;">
        <el-table-column prop="title" label="标题" header-align="center" />
        <el-table-column prop="sellpoint" label="卖点" header-align="center" />
        <el-table-column prop="price" label="价格" header-align="center" align="right" width="100" />
        <el-table-column prop="intro" label="说明" header-align="center" />


        <el-table-column label="[操作]" width="220">
          <template slot-scope="s">
          <el-button type="success" @click="toupdate(s.$index,s.row)"
          icon="el-icon-check">修改</el-button>
          <el-button type="danger" @click= "del(s.$index)" icon="el-icon-close">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form :model="m" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="m.title"/>
          </el-form-item>
          <el-form-item label="卖点">
            <el-input v-model="m.sellpoint"/>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="m.price"/>
          </el-form-item>
          <el-form-item label="说明">
            <el-input type="textarea" v-model="m.intro"/>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footre" class="dialog-footer"></span>
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button @click="save()">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
  //这个数据区，只允许本组件使用
  export default {
    name: "Item",
    data() {
      return {
        sysname: "京淘电商平台",
        dialogVisible: false,
        isUpdate:false,
        index:null,//全局变量，代表当前的索引值
        m: { //临时存放数据model
          title: '',
          sellpoint: '',
          price: 0,
          intro: ''
        },
        list: [{
            title: "Java核心技术 卷I 基础知识（原书第11版）",
            sellpoint: "[美] 凯·S.霍斯特曼（Cay S.Horstmann） 著",
            price: "102",
            intro: "由 京东 发货, 并提供售后服务. 23:10前下单，预计明天(02月20日)送达"
          },
          {
            title: "Java入门",
            sellpoint: "精品",
            price: "99",
            intro: "经典入门书籍"
          },
          {
            title: "Java入门",
            sellpoint: "精品",
            price: "99",
            intro: "经典入门书籍"
          },
          {
            title: "Java入门",
            sellpoint: "精品",
            price: "99",
            intro: "经典入门书籍"
          }
        ]
      }
    },
    methods: {
      toadd: function() {
        //防止数据已经有值 需要清空对象
        this.m={};
        //展现对话框 调用数据区的数据要加this
        this.dialogVisible = true;
        this.isUpdate=false;
      },
      save:function(){//这个方法复用 新增 修改 删除都用它
      if(!this.isUpdate){
        this.list.splice(0,0,this.m)
      }else{//修改 index怎么来？在修改按钮通过插槽传入index，可以设置全局变量，来记录这个值
      //1,数据区，index变量 2，修改index
        this.list.splice(this.index,1,this.m)
      }
      //在list数组新增数据
      // this.list.splice(0,0,this.m);
      this.dialogVisible = false;
      this.m={};

      },
      del:function(index){
        this.list.splice(index,1)
      },
      toupdate:function(index,row){
       //获取当前数据
       // this.m= row;
       this.m=JSON.parse(JSON.stringify(row));
       this.dialogVisible=true;
       this.isUpdate=true;
       this.index=index;//前面index是全局参数，后面的是toupdate的参数
      }
    }

  }
</script>

<style>
  /*字体不一致是工具的问题 徐自己设置*/
  textarea{
    font-family: "微软雅黑";
  }
</style>
